/*
 * @Author: zhangyukele
 * @Date: 2019-09-25 14:41:03
 * @LastEditors: zhangyukele
 * @LastEditTime: 2019-09-25 15:22:58
 * @Description: 组件用例
 */


import React, { Component } from 'react'

import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Image
} from 'react-native';

import BD_noRepeat from '../src/BD_noRepeat'
import BD_dashed from '../src/BD_dashed'



export default class Demo extends Component {

  mockApi = () => {
    return new Promise(function (resolve, reject) {

      setTimeout(() => {
        resolve(1000);
      }, 2000);

    });
  }


  render() {
    return (
      <ScrollView style={styles.wrap}>
        <View style={styles.box}>
          <Text style={styles.boxTitle}>重复点击包裹组件 BD_noRepeat</Text>
          <Text>描述: 处理重复点击问题,属于包裹层,被包裹层使用插槽的形式</Text>
          <View>
            <View><Text>相关参数:</Text></View>
            <View><Text>flagType 重复点击类型 ==>  time 时间类型  api 接口类型 对应的pressHandler必须返回一个Promise对象 </Text></View>
            <View><Text>timeInterval flagType为 time 时候有效,  重复点击间隔时间(s) (默认1s) </Text></View>
            <View><Text>wrapStyle 包裹层的样式,  样式数组或者对象 (默认是整行)</Text></View>
          </View>
          <View style={styles.box}>
            <View style={styles.titles}><Text>包裹图片</Text></View>
            <BD_noRepeat flagType="api"  pressHandler={() => {
              return this.mockApi()
            }}>
              <Image source={require('../src/img/timg.jpg')} style={{ width: 20, height: 20 }}></Image>
            </BD_noRepeat>
          </View>

          <View style={styles.box}>
            <View style={styles.titles}><Text>包裹图片</Text></View>
            <BD_noRepeat flagType="time" timeInterval={5} pressHandler={() => {
              return this.mockApi()
            }}>
              <Text>sdfsdf</Text>
            </BD_noRepeat>
          </View>
        </View>

        <View>
          <Text style={styles.boxTitle}>虚线组件 BD_dashed</Text>
          <Text>描述: 指定宽度/指定高度的虚线条,横纵向</Text>
          <View>
            <View><Text>相关参数:</Text></View>
            <View><Text>width 线段总长度</Text></View>
            <View><Text>lineWidth 单个徐线条的长度  (默认2)</Text></View>
            <View><Text>lineSpace 每个虚线的间隔举例 (默认2) </Text></View>
            <View><Text>flexD 虚线的方向  'column' ===> 垂直, 'row' ===> 水平(默认)</Text></View>
            <View><Text>lineWeight 虚线的宽度 (默认1)</Text></View>
            <View><Text>color 虚线的颜色 (默认red)</Text></View>
          </View>
          <View style={styles.box}>
            <View style={styles.titles}><Text>实例一</Text></View>
            <BD_dashed width={99} color='blue' ></BD_dashed>
          </View>
          <View style={styles.box}>
            <View style={styles.titles}><Text>实例二</Text></View>
            <BD_dashed width={200} color='red' lineWidth={5} ></BD_dashed>
          </View>

          <View style={styles.box}>
            <View style={styles.titles}><Text>实例三</Text></View>
            <BD_dashed width={200} color='green' lineWidth={5} flexD='column'></BD_dashed>
          </View>



        </View>



      </ScrollView>


    );
  }
}

const styles = StyleSheet.create({
  wrap: {
    padding: 20
  },
  box: {
    paddingVertical: 20

  },
  titles: {
    paddingBottom: 10
  },
  boxTitle: {
    fontWeight: '500',
    color: 'red',
    fontSize: 20
  }
})


